<template>
  <div id="echarts2"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    timeList: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.showEcharts2()
  },
  created() {},
  methods: {
    showEcharts2() {
      let myChart = this.$echarts.init(document.getElementById('echarts2'))
      const data = this.timeList
      let datum = data.map((v) => v.value)
      // let color = ['#27D099', '#B458F5', '#FCD54B', '#5684F4', '#f36868']
      let color = ['#27D099', '#B458F5', '#5684F4', '#f36868', '#FCD54B']
      let data1 = data[0].value + data[1].value + data[2].value + data[3].value + data[4].value
      let baseData = []
      for (var i = 0; i < data.length; i++) {
        baseData.push({
          value: data[i].value,
          name: data[i].name,
          itemStyle: {
            normal: {
              borderWidth: 15,
              shadowBlur: 8,
              borderColor: color[i],
              borderRadius: 0,
            },
          },
        })
      }
      let option = {
        color: color,
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b} <br/>占比：{d}%',
        },
        legend: {
          top: '3%',
          left: 'center',
          itemGap: 10,
          itemWidth: 4,
          width: '100%',
          textStyle: {
            fontSize: 14, //字体大小
            color: '#ffffff', //字体颜色
          },
        },
        grid: {
          left: 10,
          bottom: 10,
        },
        series: [
          {
            zlevel: 1,
            name: '',
            type: 'pie',
            selectedMode: 'single',
            radius: [70, 95],
            center: ['50%', '56%'], // 第一个数值表示左右位置，第二个数值表示上下位置
            startAngle: 60,
            // hoverAnimation: false,
            label: {
              normal: {
                position: 'inside',
                show: true,
                color: '#fff',
                formatter: function (params) {
                  return params.percent.toFixed() + '%'
                },
                rich: {
                  b: {
                    fontSize: 16,
                    lineHeight: 30,
                    color: '#fff',
                  },
                },
              },
            },
            itemStyle: {
              normal: {
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 10,
              },
            },
            data: baseData,
          },
          {
            name: '',
            type: 'pie',
            selectedMode: 'single',
            radius: [70, 95],
            center: ['50%', '56%'], // 第一个数值表示左右位置，第二个数值表示上下位置
            startAngle: 60,
            data: [
              {
                value: data1,
                name: '',
                label: {
                  normal: {
                    show: true,
                    formatter: '{c|{c}个} \n {a|今日核酸\n检测总数}',
                    rich: {
                      c: {
                        color: '#fff',
                        fontSize: 20,
                        fontWeight: 'bold',
                        lineHeight: 2,
                        align: 'center',
                        padding: [30, 0, 30, 0],
                      },
                      a: {
                        align: 'center',
                        color: 'rgb(98,137,169)',
                        fontSize: 12,
                        padding: [16, 0, -10, -10],
                      },
                    },
                    position: 'center',
                  },
                },
              },
            ],
          },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>
